<template>
	<div class="main">
		<div v-for="(item, index) in baseInfo.Configs" :key="index">
			<div v-if="item.Type">
				<!-- 输入框 -->
				<van-field :border="false" name="area" v-if="item.Type == 'Text' || item.Type == 'Number'"
					v-model="item.Value" :label="item.Display">
					<template #extra>
						{{ item.Unit }}
					</template>
				</van-field>
				<!-- 单位存在 -->
				<van-field v-model="item.AnotherValue" v-if="item.RelatedDisplay" label=" ">
					<template #extra>
						{{ item.RelatedFieldUnit }} </template>
				</van-field>
				<van-field class="input_text" v-if="item.Type == 'Choose'" v-model="trade" :label="item.Display"
					readonly autosize type="textarea" />
				<!-- 地区 -->
				<van-field required class="input_text" v-if="item.Type == 'City'" v-model="item.Value"
					:label="item.Display" readonly autosize type="textarea" right-icon="arrow" />
				<!-- 详细地址 -->
				<div class="problem" v-if="item.Type == 'Map'">
					<div>
						<van-field class="input_text" :label="item.Display" input-align="right">
							<template #input>
								<div style="color: #1296db">从地图选择</div>
							</template>
						</van-field>
					</div>
					<van-field v-model="item.Value" rows="3" autosize type="textarea" placeholder="请输入反馈内容" />
				</div>
				<!-- 图片 -->
				<van-field v-if="item.Type == 'SingleImage'" class="input_text" name="uploader" :label="item.Display">
					<template #input>
						<img class="imgs" v-if="item.Value" :src="baseUrl + item.Value" alt="" />

						<van-uploader v-else v-model="uploader" />
					</template>
				</van-field>
				<!-- 单选框 -->
				<van-field class="input_text" name="radio" :label="item.Display" v-if="item.Type == 'Radio'">
					<template #input>
						<van-radio-group v-model="item.Value" direction="horizontal">
							<van-radio v-for="(item1, index1) in item.ParamList" :key="index1" :name="item1.ID"
								style="margin: 0 10px 10px 0">{{ item1.Name }}</van-radio>
						</van-radio-group>
					</template>
				</van-field>
				<!-- 多选 -->
				<van-field class="input_text" name="radio" :label="item.Display" v-if="item.Type == 'Checkbox' &&
			!item.FirstFieldName &&
			!item.FirstFieldUnit &&
			!item.SecondFieldName
			">
					<template #input>
						<van-checkbox-group v-model="item.Value" direction="horizontal">
							<van-checkbox shape="square" v-for="(item1, index1) in item.ParamList" :key="index1"
								:name="item1.ID" style="margin: 0 10px 10px 0">{{ item1.Name }}</van-checkbox>
						</van-checkbox-group>
					</template>
				</van-field>
				<!-- 下划线 -->

				<van-field class="input_text spe_box" readonly name="checkbox" :label="item.Display || item.RiskName"
					v-if="item.Type == 'Checkbox' &&
			(item.FirstFieldName || item.FirstFieldUnit || item.SecondFieldName)
			">
					<template #input>
						<div>
							<div v-for="(item1, index1) in item.ParamList" :key="index1">
								<div class="spec-right" v-if="item.SecondFieldName">
									<van-checkbox-group v-model="item.checkboxGroup">
										<van-checkbox :name='item1.ID' shape="square">
											{{ item1.Name }}
										</van-checkbox>
									</van-checkbox-group>
									<input type="text" v-model="item1.FirstField" class="input-line">
									<span v-if="item.FirstFieldUnit">{{ item.FirstFieldUnit }}，</span>
									<span v-if="item.SecondFieldName">{{ item.SecondFieldName }}</span>
									<input type="text" class="input-line" v-model="item1.SecondField">
									<span>{{ item.SecondFieldUnit || item1.Extra }}</span>
								</div>
								<div class="spec-right" v-else>
									<van-checkbox-group v-model="item.checkboxGroup">
										<van-checkbox :name='item1.ID' shape="square">
											{{ item1.Name }}
										</van-checkbox>
									</van-checkbox-group>
									<input type="text" v-if="item.ShowFirstFieldKey == item1.ID"
										v-model="item1.FirstField" class="input-line">
									<span v-if="item.FirstFieldName || item.SecondFieldName">，{{ item.FirstFieldName ||
			item.SecondFieldName }}</span>
									<input type="text" class="input-line" v-model="item1.FirstField">
									<span>{{ item.FirstFieldUnit || item.SecondFieldUnit || item1.Extra }}</span>
								</div>
							</div>

						</div>
					</template>
				</van-field>
			</div>
			<div v-if="!item.Type && item.Unit">
				<van-field name="area" v-model="item.Value" :label="item.Display">
					<template #extra>
						{{ item.Unit }}
					</template>
				</van-field>
			</div>
		</div>

		<div class="btn_submit">
			<van-button class="br-5" block type="info" @click="save">
				保存
			</van-button>
		</div>
	</div>
</template>

<script>
import { GetQueryupText, updateRiskPointInfoModifyPostNew } from '@/api/base'
import { mapGetters } from 'vuex'
export default {
	components: {},
	data() {
		return {
			checked: true,
			number: '',
			result: '',
			checkbox: false,
			checkboxGroup: [],
			baseInfo: this.$route.params,
		}
	},
	computed: {
		...mapGetters(['baseUrl']),
	},
	created() {
		const baseInfo = this.$route.params
		this.baseInfo = baseInfo

		// 处理复选框数据
		// let newArr =[]
		if (baseInfo.Configs) {
			baseInfo.Configs.forEach((item) => {
				// if (item.Type == 'Checkbox' && !item.ValueType) {
				// 	item.Value = item.Value.split(',')
				// }
				if (item.ValueType == 'Json') {
					item.ParamList.filter((v1) => {
						item.Value.filter((v2) => {
							if (v1.ID == v2.Key) {
								v1.FirstField = v2.FirstField
								v1.SecondField = v2.SecondField
							}
						})
					})
					item.checkboxGroup = item.Value.map(v => {
						return v.Key
					})
					console.log(item.ParamList, 'item.ParamList');

				}
			})
		}
	},
	methods: {
		save() {
			this.loading = true
			let newArr = []
			this.baseInfo.Configs.forEach((item) => {
				console.log(item)
				const ParamList = item.ParamList.filter(v => item.checkboxGroup.some(v1 => v1 == v.ID))
				const data = ParamList.map(v => {
					return {
						Key: v.ID,
						FirstField: v.FirstField || '',
						SecondField: v.SecondField || ''
					}
				})
				newArr.push({
					DisplayKey: item.FieldName,
					Value:
						item.ValueType == 'Json'
							? JSON.stringify(data)
							: item.Value.join(','),
				})
			})
			console.log(newArr, 'newArr')
			updateRiskPointInfoModifyPostNew({ Details3: newArr })
				.then((res) => {
					this.loading = false
					this.$router.go(-1)
				})
				.catch((err) => {
					console.log('err', err)
				})
		},
	},
}
</script>

<style lang="less">
.checkbox {
	>div {
		/*box-sizing: content-box!important;*/
	}

	.van-checkbox__label {
		display: flex;
		height: 20px;
	}

	.van-cell.van-field {
		vertical-align: middle;
		padding: 0 !important;
	}
}

.spe_box {
	background-color: #ffffff;
	display: flex;
	justify-content: space-between;
	padding: 10px 16px;

	.spe_name {
		width: 25% !important;
	}

	/*.van-checkbox-group{*/
	/*  display: flex;*/
	/*  !*position: absolute;*!*/
	/*  !*z-index: 10;*!*/
	/*  !*width: 30px!important;*!*/
	/*}*/
}

.spec-right {
	font-size: 14px;
	display: flex;
	flex-wrap: wrap;
	margin-bottom: 10px;

	.van-field {
		width: 100px;
	}

	.van-field__control {
		border-bottom: 1px solid;
		background-color: #fff;
	}

	.input-line {
		width: 60px;
		height: 20px;
		border: none;
		border-bottom: 1px solid;
		padding: 0 5px;
		box-sizing: border-box;
		text-align: center;
	}
}
</style>
